import { Component } from "react";
import { Modal, Provider, Toast } from "@ant-design/react-native";
import { apiDomain, postData } from "../../common/api";
import { Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { observer } from "mobx-react";
import cartStatus from "../../common/cartStatus";
import userStatus from "../../common/userStatus";
import PropTypes from "prop-types";

@observer
export default class ProductInfo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            info: {}
        }
    }

    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    }

    componentDidMount () {
        this.load()
    }

    addToCart () {
        console.log(this.props)
        const _this = this
        if (userStatus.userStatus.status === 'login') {
            cartStatus.addToList({ info: Object.assign(this.state.info), num: 1, id: this.state.info.id })
            Modal.alert("Success", "Add to cart success!", [
                {
                    text: "OK"
                }
            ])
        } else {
            Modal.alert("Need login", "To provide you with a more comfortable shopping experience, please log in first", [
                {
                    text: "Not now"
                },
                {
                    text: "toLogin",
                    onPress () {
                        debugger
                        _this.props.route.params.toLogin()
                        _this.props.navigation.goBack();
                    }
                }
            ])
        }
    }

    load () {
        const { route } = this.props
        const loading = Toast.loading('loading')
        const url = apiDomain + "/Index/getProduct"
        postData(url, {
            id: route.params.id
        }).then(res => {
            if (res.code === 200) {
                console.log('get list success', res.data)
                this.setState({
                    info: res.data
                })
            } else {
                Modal.alert('Error', res.msg, [
                    { text: 'OK' },
                ])
            }
        }).finally(() => {
            Toast.remove(loading)
        })
    }

    viewProduct (id) {
        this.props.navigation.navigate('viewProduct', {
            id: id
        })
    }

    toCart () {
        const _this = this
        if (userStatus.userStatus.status === 'login') {
            this.props.navigation.navigate('cart')
        } else {
            Modal.alert("Need login", "To provide you with a more comfortable shopping experience, please log in first", [
                {
                    text: "Not now"
                },
                {
                    text: "toLogin",
                    onPress () {
                        _this.props.route.params.toLogin()
                        _this.props.navigation.goBack();
                    }
                }
            ])
        }
    }

    render () {
        return (
            <View style={styles.provider}>
                <ScrollView
                    style={styles.container}
                    automaticallyAdjustContentInsets={false}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                >
                    <Image source={{ uri: this.state.info.cover }} style={styles.cover} />
                    <View style={{ width: 0.9 * width, marginLeft: 0.05 * width }}>
                        <Text style={styles.title}>{this.state.info.name}</Text>
                        <Text style={styles.content}>Remain {this.state.info.stock}</Text>
                        <Text style={styles.price}>${this.state.info.salesPrice}</Text>
                    </View>
                    {/*<View style={{flex: 1, flexDirection: 'row', paddingTop: 10, borderBottomWidth: 1, borderBottomColor: "#DADADA", borderStyle: 'solid', width: 0.9 * width, marginLeft: 0.05 * width}}>*/}
                    {/*    <Image source={require('../../img/good.png')} style={{width: 20, height: 20}} />*/}
                    {/*    <Text style={{marginLeft: 10}}>{this.state.info.likeNum ? this.state.info.likeNum : 0}</Text>*/}
                    {/*    <Image source={require('../../img/bad.png')} style={{width: 20, height: 20, marginLeft: 30}} />*/}
                    {/*    <Text style={{marginLeft: 10}}>{this.state.info.unLikeNum ? this.state.info.unLikeNum : 0}</Text>*/}
                    {/*</View>*/}
                    <View style={styles.btnView}>
                        <TouchableOpacity style={styles.cart} onPress={() => this.addToCart()}>
                            <Text style={styles.cartText}>Add to cart</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.cart} onPress={() => this.toCart()}>
                            <Text style={styles.cartText}>Go to cart</Text>
                        </TouchableOpacity>
                    </View>
                    <Text style={{
                        fontSize: 20,
                        fontWeight: "bold",
                        color: "#333",
                        marginTop: 10,
                        width: 0.9 * width,
                        marginLeft: 0.05 * width
                    }}>Product Info</Text>
                    <Text style={[styles.description, {
                        width: 0.9 * width,
                        marginLeft: 0.05 * width
                    }]}>{this.state.info.description}</Text>
                </ScrollView>
            </View>
        );
    }
}

const { width, height } = Dimensions.get('window');
const { screenWidth, screenHeight } = Dimensions.get('screen');

const styles = StyleSheet.create({
    provider: {
        width: screenWidth,
        height: screenHeight,
        flex: 1,
    },
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        width: screenWidth,
        height: screenHeight
    },
    title: {
        fontSize: 26,
        fontWeight: 'bold',
        marginTop: 10
    },
    content: {
        fontSize: 20,
        color: 'gray'
    },
    info: {
        flex: 1,
        flexDirection: 'column',
        marginLeft: 20
    },
    cover: {
        width: screenWidth,
        height: 200
    },
    price: {
        fontSize: 24,
        marginTop: 5,
        fontWeight: 'bold',
        paddingTop: 20,
        paddingBottom: 20
    },
    btnView: {
        paddingTop: 10,
        paddingBottom: 10,
        width: screenWidth,
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    description: {
        fontSize: 14,
        color: "#333",
        marginTop: 20
    },
    cart: {
        width: 0.4 * width,
        backgroundColor: 'rgb(0, 21, 41)',
        paddingTop: 10,
        paddingBottom: 10,
        justifyContent: 'center',
        alignItems: 'center',
        textAlign: 'center',
    },
    cartText: {
        color: '#ffe700',
        textAlign: 'center'
    },
    cartView: {
        width: 50,
        height: 50,
        position: 'absolute',
        bottom: 80,
        right: 30,
        borderRadius: 999,
        shadowColor: 'rgba(0, 0, 0, 0.8)',
        shadowRadius: 3,
        elevation: 4,
    },
    cartIcon: {
        width: 24,
        height: 24,
        marginLeft: 13,
        marginTop: 13
    },
    cartSum: {
        position: 'absolute',
        width: 20,
        height: 20,
        backgroundColor: '#FF0000',
        color: '#fff',
        right: -5,
        top: -5,
        borderRadius: 999,
        textAlign: 'center'
    }
});
